<template>
    <div>
		<Form ref="queryForm" :model="dataToQuery" :label-width="100">
			<Row  class="query-form">
				<Col span="8">
					<FormItem label="年度：" prop="year" >
						<DatePicker class="query-form-el" type="year" v-model="dataToQuery.year1" :clearable="false"
									@on-change="()=>{if(dataToQuery.year1 instanceof Date){dataToQuery.year = dataToQuery.year1.getFullYear().toString()}}"></DatePicker>
					</FormItem>
				</Col>
				<Col span="8">
					<!--<Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>-->
					<Button @click="reset1" class="ivu-btn-reset">重置</Button>
					<Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
				</Col>
			</Row>
		</Form>
		<Spin fix v-if="spinLoding"></Spin>
		<Row style="margin-right:10px; margin-top: 5px;">
			<Col span="12" v-for="item in dataList">
				<Card dis-hover>
				    <div :id='item.refId' style="height: 300px;"></div>
				</Card>
			</Col>
		</Row>

    </div>
</template>
<script>
    import {Api} from '@/api/index.js'
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    import {sessionStorage} from '@/common/cacheUtils.js';
    import echarts from 'echarts'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    export default {
        components:{cascaderDom},
        data() {
            return{
                ...this.createCommonDataField(),
                // 切换标签
				currentPosition:"",
				currentType:"",
                // api
                currentUser: JSON.parse(sessionStorage('userId').get('userId')),
                queryUrl: Api.queryEnvAggregate+'/getEchare',
                dataList:[],
                spinLoding:false
            }
        },
        mounted(){
            // this.dataToQuery.year1 = new Date()
            // this.dataToQuery.year = new Date().getFullYear()
			this.reset1();
        },
        methods: {
            ...pageCommonFunction,
            reset1(){
                this.dataToQuery.year1 = new Date()
                this.dataToQuery.year = new Date().getFullYear()
                this.query();
			},
            query: function () {
                this.spinLoding = true
                this.$http.get(this.queryUrl+'?year='+this.dataToQuery.year).then((res) => {
                    if (res.data.status === 201) {
                        this.$Message.error(res.data.msg);
                    }
                    this.dataList = res.data.data;
                    this.$nextTick(() => {
                        this.dataList.forEach(m => {
                            let pieChart = echarts.init(document.getElementById(m.refId));
                            let pieOption = this.getPieInjuryLevelOption();
                            pieOption.series[0].data = m.data;
                            pieOption.title.text = m.text
                            pieChart.setOption(pieOption);
                            window.onresize = pieChart.resize;
                        })
                    })
                    this.spinLoding = false

                }).catch(e => {
                    this.$Message.error("数据获取失败")
                    this.spinLoding = false
                })
            },


            getPieInjuryLevelOption(){
                let option = {
                    title: {
                        text: '',
                        textStyle: {
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        right: 15,
                        top:'center',
                        data: []
                    },
                    color:['#42A5F5', '#FFC310','#FF3E80','#8fff9c','#52ff68','#417fff','#f97c7c','#fe444b','#f0cfba'],
                    series: [
                        {
                            // name: '事故人数',
                            type: 'pie',
                            radius: '60%',
                            // radius: ['50%', '70%'],
                            center: ['45%', '50%'],
                            itemStyle: {
                                borderRadius: 10,
                                borderColor: '#fff',
                                borderWidth: 2
                            },
                            label: {
                                formatter: '{@2012}' // ({d}%)
                            },
                            data: [],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                return option;
            },
        }
    }
</script>
<style scoped>
    /deep/ .table-box .ivu-table-header th{position: static;border: 1px solid #ddd;}
</style>
